<!-- 短信登录组件 -->
<template>
    <div>
        <a-form-model ref="ruleForm" :rules="messageRules" :model="formMessage">
            <a-form-model-item prop="phoneNum">
                <a-input v-model="formMessage.phoneNum" placeholder="请输入手机号">
                    <!-- <a-icon slot="prefix" type="user" style="color:#333" /> -->
                </a-input>
            </a-form-model-item>
            <a-form-model-item prop="verCode">
                <div class="flexBetweenCenter">
                    <a-input placeholder="请输入验证码" v-model="formMessage.verCode" style="width:calc(100% - 110px)" />
                    <a-button :disabled='getVerCodeDisable' type="primary" style="width:102px" ghost
                        @click="getVerCode">{{ verCodeValue }}
                    </a-button>
                </div>
            </a-form-model-item>
        </a-form-model>
        <!-- <a-button type="primary" style="width:100%;margin-bottom: 17px;" @click="messageSubmit">
                {{ pageName == 'login' ? '立即登录' : '注册' }}
            </a-button>  -->
        <slot name="submit">

        </slot>
        <div class="flexEnd" v-if="pageName == 'login'">
            <div style="margin-right:15px;cursor:pointer;color:#1890ff;font-size:12px" @click="toRegister">
                立即注册
            </div>
        </div>
    </div>
</template>

<script>
import { message } from 'ant-design-vue';
export default {
    name: 'messageForm',
    props: ['pageName'],
    data() {
        return {
            getVerCodeDisable: false,
            verCodeValue: '获取验证码',
            formMessage: {
                phoneNum: '',
                verCode: ''
            },
            messageRules: {
                phoneNum: [
                    { required: true, message: '请输入手机号', trigger: 'change' }
                ],
                verCode: [
                    { required: true, message: '请输入验证码', trigger: 'change' }
                ]
            },

        }
    },
    methods: {
        messageSubmit() {
            this.$refs.ruleForm.validate(valid => {
                if (valid) {
                    this.$emit('validateSuccess', this.formMessage)
                } else {
                    this.$emit('validateSuccess', false)
                    return false;
                }
            });
        },
        getVerCode() {
            this.$refs.ruleForm.validateField('phoneNum', valid => {
                if (valid) {
                    console.log('手机号未填');
                } else {
                    this.getVerCodeDisable = true
                    this.verCodeValue = 60
                    message.config({
                        top: `16px`,
                        duration: 2,
                        maxCount: 3,
                    });
                    this.$message.destroy()
                    this.$message.success('已发送验证码到你的手机！')
                    let timer = null
                    timer = setInterval(() => {
                        this.verCodeValue--
                        if (this.verCodeValue <= 0) {
                            clearInterval(timer)
                            this.getVerCodeDisable = false
                            return
                        }
                    }, 1000)
                    return false;
                }
            });
        },
        toRegister() {

            this.$router.push({ path: '/register' })
        }
    }
}
</script>

<style scoped>
.flexEnd {
    display: flex;
    justify-content: flex-end;
}

.flexBetweenCenter {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>